<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user';
import { usePageTitle } from '@/use/usePageTitle';
import { generateCssVars } from '@vc/utils';
import MainContainer from '../components/main.vue';
import LoginWithPwd from './login-with-pwd.vue';
import LoginWithPhone from './login-with-phone.vue';
import { LoginTabEnum, tabStyle, pageCfg } from '../config';

usePageTitle();

let activeName = $ref(LoginTabEnum.TAB_USER);
</script>

<template>
  <main-container>
    <vc-tabs :style="generateCssVars(tabStyle, 'tabs')" v-model="activeName">
      <vc-tab-pane :label="pageCfg.loginText" :name="LoginTabEnum.TAB_USER">
        <login-with-pwd :activeName="activeName" />
      </vc-tab-pane>
      <vc-tab-pane :label="pageCfg.phoneText" :name="LoginTabEnum.TAB_PHONE">
        <login-with-phone :activeName="activeName" />
      </vc-tab-pane>
    </vc-tabs>
  </main-container>
</template>

<style lang="scss" scoped>
  :deep(.vc-tabs) {
    .vc-tabs__item{
      margin-right: 32px;
    }
    .is-active {
      border-bottom: 0;
    }
  }
</style>